<template xmlns="http://www.w3.org/1999/html">
  <div class="content">
    <div class="title">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }"><b>系统</b></el-breadcrumb-item>
        <el-breadcrumb-item>流程配置</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="main-content">
      <el-col style="margin-bottom: 20px"><el-button @click="createFlow" size="primary" >新增流程</el-button></el-col>
      <el-table :data="flowList" highlight-current-row @row-click="rowClick">
        <el-table-column prop="flowTempId" label="编号ID" width="230">
        </el-table-column>
        <el-table-column prop="flowName" label="流程名称" width="200">
        </el-table-column>
        <el-table-column prop="applyTypeName" label="流程类型" width="200">
        </el-table-column>
        <el-table-column prop="options" label="操作" min-width="80">
            <template scope="scope">
              <el-button @click="changeData(scope.$index,scope.row)" type="text" size="small" icon="edit"></el-button>
              <el-button @click="deleteData(scope.$index,scope.row)" type="text" size="small" icon="delete"></el-button>
            </template>
          </el-table-column>
      </el-table>
      <el-col>
      <el-pagination layout="sizes,prev, pager, next" @current-change="getCurrentPage"
                     :page-sizes="[10,20,30,50]" :total="total"
                     :page-size="pagesize"
                     :current-page.sync="currentPage"
                     @size-change="sizeChange"
                     style="text-align: center;margin-top: 20px">
      </el-pagination>
      </el-col>
      </div>
      <el-dialog title="新增流程" :visible.sync="dialogFormVisible">
        <el-form :model="form" style="margin-left: 120px" :label-position='left' label-width="80px">
          <el-form-item label="流程id">
            <el-input v-model="form.flowTempId" auto-complete="off" style="width: 300px"></el-input>
          </el-form-item>
          <el-form-item label="流程名称">
            <el-input v-model="form.flowName" auto-complete="off" style="width: 300px"></el-input>
          </el-form-item>
          <el-form-item label="流程类型">
            <el-select v-model="form.applyType" placeholder="请选择流程类型" style="width: 300px">
               <el-option label="贷款申请审核" value="1"></el-option>
               <el-option label="打款申请审核" value="2"></el-option>
               <el-option label="通融申请审核" value="3"></el-option>
               <el-option label="修改申请审核" value="4"></el-option>
               <el-option label="通融过件审核" value="5"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitFlow">确 定</el-button>
        </div>
      </el-dialog>
  </div>
</template>

<script>
  import ElCol from 'element-ui/packages/col/src/col'
  import ElForm from '../../../node_modules/element-ui/packages/form/src/form.vue'
  import axios from 'axios'
  import $ from 'jquery'

  export default {
    components: {
      ElForm,
      ElCol
    },
    data () {
      return {
        companyNo:sessionStorage.getItem('companyNo'),
        dialogFormVisible:false,
        flowList:[],
        pagesize: 10,
        currentPage:1,
        total: 10,
        form:{flowId:'',flowName:'',applyType:''},
        applyTypeList:[
                      {name:'贷款申请审核',code:'1'},
                      {name:'打款申请审核',code:'2'},
                      {name:'通融申请审核',code:'3'},
                      {name:'修改申请审核',code:'4'},
                      {name:'通融过件审核',code:'5'},]
      }
    },
    methods:{
      getFlowList(){
        let that = this
        this.$http.get("/workflow/list/"+this.companyNo)
        .then((response)=>{
          console.log(response)
          this.flowList = response.data.data
          $.each(this.flowList,function(index,value){
            $.each(that.applyTypeList,function(index_1,value_1){
              if(value.applyType==value_1.code){
                value.applyTypeName = value_1.name
              }
            })
          })
        })
        .catch(function(error){
          console.log(error)
        })
      },
      deleteData(index , row){
        console.log(row)
        this.$http.delete("/workflow/"+row.workflowId)
        .then((response)=>{
          console.log(response)
          if(response.data.success){
            this.$message("已删除")
            this.getFlowList()
          }else{
            this.$message("删除失败")
          }
        })
        .catch(function(error){
          console.log(error)
        })
      },
      createFlow(){
        this.dialogFormVisible = true
        this.form = {flowId:'',flowName:'',applyType:''}
      },
      changeData(index , row){
        this.dialogFormVisible = true
        this.form = row
        this.form.applyType = JSON.stringify(row.applyType)
      },
      submitFlow(){
        this.dialogFormVisible = false
        this.form.companyNo = this.companyNo
        if(this.form.workflowId==null){
          this.$http.post("/workflow/",this.form)
          .then((response)=>{
            console.log(response)
            if(response.data.success){
              this.$message("已添加")
              this.getFlowList()
            }else{
              this.$message("添加失败")
            }
          })
          .catch(function(error){
            console.log(error)
          })
        }else{
          this.$http.put("/workflow/",this.form)
          .then((response)=>{
            if(response.data.success){
              this.$message("修改成功")
            }else{
              this.$message("修改失败")
            }
          })
          .catch(function(error){
            console.log(error)
          })
        }
        

      }
    },

    mounted() {
      this.getFlowList()
    },
    beforeMount(){
    }
  }
</script>

<style lang="scss" scoped>
.content {
  padding: 10px;
  background: #F7F7F7;
  .title {
    color: #99A9BF;
    font-size: 14px;
    line-height: 18px;
    margin: 8px 0px 10px 0px;
  }
  .main-content {
    background: #fff;
    position: fixed;
    top: 96px;
    bottom: 10px;
    left: 216px;
    right: 16px;
    overflow: auto;
    padding: 20px;
  }
}
</style>